<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{ title }}</text>
            <text class="title">{{ name }}</text>
        </view>
        <button @click="changeName">更改姓名</button>
        <button @click="reset">重置姓名</button>
        <button @click="getName">获取姓名</button>
        <button @click="saveName">同步调用</button>
        <button @click="asyncUser">异步调用</button>
    </view>
</template>

<script setup>
    import { ref } from 'vue'
    import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
    import { storeToRefs } from 'pinia'
    import { userStore } from '@/store/user'
    import Api from '@/api/user'
    const store = userStore()
    const { name } = storeToRefs(store)

    onLoad(() => {
        console.log('onLoad')
        Api.login({
            name: '123'
        })
    })
    onShow(() => {
        console.log('onShow')
    })
    onHide(() => {
        console.log('onHide')
    })

    const title = ref('hello world')

    const changeName = () => {
        store.name = 'ww'
    }
    const reset = () => {
        store.$reset()
    }
    const getName = () => {
        console.log(store.getName)
    }
    const saveName = () => {
        store.saveName('hahaha')
    }
    const asyncUser = () => {
        store.setUser()
    }
</script>

<style lang="scss" scoped>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .logo {
            height: 200rpx;
            width: 200rpx;
            margin-top: 200rpx;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 50rpx;
        }
        .text-area {
            display: flex;
            justify-content: center;
        }
        .title {
            font-size: 36rpx;
            color: #8f8f94;
        }
    }
</style>
